<template>
	<div class="index-goods-search">
		<div class="search-header border-1px"
			 v-if="isLoadDom"
		>
			<div class="sh-back"
				onclick="javascript:history.go(-1)" 
			>
				<i class="iconfont" :class="{ active: type == 2}">&#xe697;</i>
			</div>
			<div class="sh-content" v-show="type == 1">
				<img src="../assets/img/jdtemplate_title.png" />
			</div>
			<div class="sh-content active" v-show="type == 2">
				<img src="../assets/img/pinduoduo_header.png" />
			</div>
		</div>
		<div class="s-nav" v-show="type == 1 && isLoadDom">
			<ly-tab
			    v-model="selectedId"
			    :items="items"
			    :options="options"
			    @change="handleChange"
			>
			</ly-tab>
		</div>
		<div class="s-nav" v-show="type == 2 && isLoadDom">
			<ly-tab
			    v-model="selectedId"
			    :items="items"
			    :options="options"
			    @change="handleChange"
			>
			</ly-tab>
		</div>
		<div class="station" id="station"></div>
		<Scroll :on-refresh="onRefresh" 
			:on-infinite="onInfinite" 
			:loadingText = "loadingText" 
			@topshow="topshow"
			:scrollNum="scrollNum"
			v-if="isLoadDom"
		>
			<div class="banner" v-if="imgList !== undefined && type == 1" id="banner">
				<swiper :options="swiperOption">
					<swiper-slide v-for="(img, index) in imgList"
						:key="index"
					>
						<img v-lazy="img" 
							:key="img"
						/>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
			<div class="banner" v-if="imgList !== undefined && type == 2" id="banner">
				<swiper :options="swiperOption">
					<swiper-slide v-for="(img, index) in pddimgList"
						:key="index"
					>
						<img v-lazy="img" 
							:key="img"
						/>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>
			<GoodOne :goodsList=goodsList :goodsType=type v-if="isLoadDom"></GoodOne>
		</Scroll>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import GoTop from '../components/GoTop.vue'
	import GoodOne from '../components/goods_one.vue'
	import Scroll from '../components/my_scroll.vue'
	export default{
		components: {
			GoTop,
			GoodOne,
			Scroll
		},
		data(){
			return{
				topclass: false,
				scrollNum: 1, 
				loadingText: '加载中...',
				page: 1,
				opt_id: 0,
				selectedId: 0,
				sort_type: 0,
				options:{
					activeColor: 'rgb(255,50,74)',
					additionalX: 50,
					reBoundExponent: 10
				},
				items: [
				{
					label: '全部'
				}],
				type: this.$route.params.id,
				is_coupon: 0,
				swiperOption: {
		          	pagination: {
		            	el: '.swiper-pagination',
		            	dynamicBullets: true
		          	}
		        },
		        goodList: [],
				goodsList: [],
				imgList: [],
				navList: [],
				pddimgList: [],
				token: window.localStorage.getItem("token"),
		        mobile: '',
		        isLoadDom: false
			}
		},
		watch: {
		    '$route' (to, from) {
		    	this.$router.go(0);
			}
		},
		beforeMount(){
			if (!this.token) {
				this.$router.push('/auther')
			}
		},
		mounted(){
			axios.post(Http.USERIDEX)
				.then( res => {
					const ret =res.data;
					if(ret.code == 1){
						this.userInfo = ret['data'];
						this.mobile = this.userInfo.mobile;
					}				
				})	
			if(this.type == 1){
				document.title = '京东'
				this.getData();
			}else if( this.type == 2){
				document.title = '拼多多'
				this.getPddData()
			}					
			this.getImg();
			let x = document.getElementsByClassName("ly-tab-active-bar");
			x[0].style.display = "none";	
			x[1].style.display = "none";
			if(x.length > 2){
				x[2].style.display= "none";
			}					
			// window.addEventListener('scroll', this.handleScroll);
		},
		updated(){
			this.isLoadDom = true;
		},
		methods: {
			goTop: function(){
                document.getElementById("banner").scrollIntoView();
            },
            topshow: function(a){
		    	this.topclass = a;
		    },
            onRefresh(done) {
            	document.getElementById('help').style.display="none";
	            if(this.type == 1){
					this.getData();
				}else if( this.type == 2){
					this.getPddData()
				}
	            done();
	            Toast({
				    message: '刷新完成',
				    position: 'bottom',
				    duration: 500
				});     
		    },
		    onInfinite(done) {
		    	document.getElementById('help').style.display="none";
		    	document.querySelector('.load-more').style.display = 'block';
		    	let vm = this;
		    	var params = new URLSearchParams();
				params.append('page', this.page);
				params.append('opt_id', this.opt_id);
				if(vm.type == 1){
					axios.post(Http.JDGOODSLIST, params).then( res =>{
						var ret = res.data;
						var arr = ret['data']['list'];
						vm.goodsList = vm.goodsList.concat(arr);
						if (arr.length > 9) {
							vm.page ++;
							// vm.$el.querySelector('.load-more').style.display = 'none';
							done() // call done
						}else{
							vm.loadingText = "加载完毕";
							setTimeout(hideLoad, 2000);
							function hideLoad (){
								document.querySelector('.load-more').style.display = 'none';
							}
						}
					})
				}else if( vm.type == 2){
					axios.post(Http.PDDTABS, params).then( res =>{
						var ret = res.data;
						var arr = ret['data']['list'];
						vm.goodsList = vm.goodsList.concat(arr);
						if (arr.length > 9) {
							vm.page ++;
							// vm.$el.querySelector('.load-more').style.display = 'none';
							done() // call done
						}else{
							vm.loadingText = "加载完毕";
							setTimeout(hideLoad, 2000);
							function hideLoad (){
								document.querySelector('.load-more').style.display = 'none';
							}
						}
					})
				}
		    },
			handleChange: function(item, index){
				document.getElementById('help').style.display="none";
				let x = document.getElementsByClassName("ly-tab-active-bar");
				x[0].style.display= "block";
				x[1].style.display= "block";
            	if( this.type == 1){
            		this.opt_id = index;
            		var params = new URLSearchParams();
					params.append('page', this.page);
					params.append('opt_id', this.opt_id);
					axios.post(Http.JDGOODSLIST, params).then( res =>{
						var ret = res.data;
						this.goodsList = ret['data']['list'];
					})
            	}else{
            		if(index == 0){
            			this.opt_id = 0;
            		}else{
            			this.opt_id = this.navList[index-1].opt_id;
            		}
            		
            		var params = new URLSearchParams();
					params.append('page', this.page);
					params.append('opt_id', this.opt_id);
					axios.post(Http.PDDTABS, params).then( res =>{
						var ret = res.data;
						this.goodsList = ret['data']['list'];
					})
            	}
            	
            },
			getData(){
				var params = new URLSearchParams();
				params.append('page', this.page);
				params.append('opt_id', this.opt_id);
				axios.post(Http.JDGOODSLIST, params).then( res =>{
					var ret = res.data;
					this.navList = ret['data']['cateList'];
					for(var i=0,len=this.navList.length ;i<len;i++){
                    	this.items.push({label: this.navList[i].opt_name})
                    }
					this.goodsList = ret['data']['list'];
				})
			},
			getImg(){
				axios.post(Http.INDEXDATA).then( res => {
					var ret =res.data;
					this.imgList = ret['data']['appcfg']['jd_banner_images'];
					this.pddimgList = ret['data']['appcfg']['pdd_banner_images'];
				})
			},
			getPddData(){
				var params = new URLSearchParams();
				params.append('sort_type', 0);
				params.append('page', this.page);
				params.append('opt_id', this.opt_id);
				axios.post(Http.PDDTABS, params).then( res =>{
					var ret = res.data;
					this.navList = ret['data']['cateList'];
					for(var i=0,len=this.navList.length ;i<len;i++){
                    	this.items.push({label: this.navList[i].opt_name})
                    }
					this.goodsList = ret['data']['list']
				})
			}
		},
		destroyed () {//离开该页面需要移除这个监听的事件
            window.removeEventListener('scroll', this.handleScroll)
        }
	}
</script>
<style lang="scss" scoped>
	.index-goods-search{
		.search-header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 6;
			width: 100%;
			height: 0.88rem;
			background: #fff;
			.sh-back{
				position: absolute;
				top: 0;
				left: 0;
				width: 0.88rem;
				height: 0.88rem;
				line-height: 0.88rem;
				text-align: center;
				i{
					font-size: 0.44rem;
					&.active{
						color: #fff;
					}
				}
			}
			.sh-content{
				width: 100%;
				height: 100%;
				&.active{
					background: #e02e24;
				}
				img{
					margin-top: 0.14rem;
					height: 0.6rem;
				}
			}

		}
		.station{
			width: 100%;
			height: 1.66rem;
		}
		.banner{
			width: 100%;
			height: 3rem;
			img{
				width: 100%;
				height: 100%;
			}
			.swiper-container{
				height: 3rem;
			}
		}
		.s-nav{
			position: fixed;
			top: 0.88rem;
			left: 0;
			z-index: 6;
			width: 100%;
			height: 0.8rem;
			background: #fff;			
		}
		@import '../assets/common/common.scss'
	}
</style>